<template>
	<scroll-view class="backview">
		<lexiconNavVue title="我的生词本" />
		<view class="topmenu-backview">
			<view class="head-selet-menuView">
				<button :class="`${select == '0' ? 'selectColo' : ''} head-select-button`" @click="headMenuTap"
					:data-index="0">未掌握</button>
				<button :class="`${select == '1' ? 'selectColo' : ''} head-select-button`" @click="headMenuTap"
					:data-index="1">已掌握</button>
				<view class="ruleView" @click="rulesWordsTap">规则说明</view>
			</view>
			<view class="search-view">
				<picker range-key="productName" @change="bindWirdChange" :value="WordGroupsIndex" :range="allWordList">
					<view class="wordGroupClass">
						{{productNameShow}}
					</view>
				</picker>
				<picker range-key="name" @change="bindPlanChange" :value="beeplanListIndex" :range="beeplanList">
					<view class="wordGroupClass">
						{{planNameShow}}
					</view>
				</picker>
				<view class="searchBackView">
					<input type="text" class="regist-team-input" placeholder="快速搜索" @input='getInputValue'
						:value="searchStr"></input>
					<image class="regist-team-img" src="../../static/image/fjh/tuanti_sousuo.png"
						@click="searchData"></image>
				</view>
			</view>
		</view>
		<view class="content-backview">
			<view class="bee-gameType-content-back" style="margin-top: 20rpx;">
				<view class="gameType-topTitle-view">
					<view class="gameType-topTitle" style="color: white;">
						单词列表 | Word List
					</view>
					<view class="gameType-line"></view>
				</view>
				<view class="wordNumberClass" ref="wordNumberRef">{{wordNumberStr}}</view>
				<view class="bottom-content-backView column"
					:style="{height: select == 0 ? (scroll_height - 15) + 'px' : (scroll_height + 40) + 'px'}">
					<z-paging :fixed="false" ref="paging" v-model="wordLibrary" @query="getQueryList"
						style="width: 100%; height: 100%;">
						<view v-for="(word, wordIndex) in wordLibrary" class="zimu-back" :key="wordIndex">
							<view class='zimu' @click='toWordDetail' :data-wordIndex="wordIndex">
								<view class='weizhi'>
									{{word.spell}}
								</view>
								<view class="yinbiao" @click='toWordDetail' :data-wordIndex="wordIndex">
									{{word.productName}}
								</view>
							</view>
						</view>
					</z-paging>
				</view>
			</view>
		</view>
		<view class="bottom_clear_view" :style="{ height: bottomHeight + 'px'}" v-if="select == '0'">
			<button class="bottom-replace-button" @click="replaceWordsTap">复 习</button>
			<button v-if="errorWordSwitch" class="bottom-replace-button" @click="openNewWordClockInTap">开启生词打卡</button>
			<button v-else class="bottom-replace-button" @click="closeNewWordClockInTap">关闭生词打卡</button>
		</view>
		<beePlanNewWordRule v-if="showPromptbox" @confirm="hidePromptbox"></beePlanNewWordRule>
		<popPromptBox v-if="showbeePlanPromptbox" :msg="message" @confirm="hidePromptbox"></popPromptBox>
		<beePlanNewWordNumber v-if="showReportPromptbox" :errorWordSwitch="errorWordSwitch" :msg="ReportPromptMsg"
			:confirmTitle="leftTitleStr" cancelTitle="误点了" @confirm="openOrCloseTap" @cancel="hidePromptbox">
		</beePlanNewWordNumber>
		<view v-if="showReviewPop">
			<view class="pop-promot-box">
				<view class="pop-promot-back">
					<view class="pop-promot-title">复习内容选择</view>
					<view class="review-content-backview">
						<view class="review-select-back">
							<view class="review-left-str">复习组别：</view>
							<picker range-key="productName" @change="bindreviewChange" :value="reviewGroupsIndex"
								:range="allWordList">
								<view class="reviewClass">
									{{reviewProductName}}
								</view>
							</picker>
						</view>
						<view class="review-select-back">
							<view class="review-left-str">复习计划：</view>
							<picker range-key="name" @change="reviewBeeplanChange" :value="reviewBeeplanListIndex"
								:range="beeplanList">
								<view class="reviewClass">
									{{reviewPlanName}}
								</view>
							</picker>
						</view>
						<view class="review-select-back">
							<view class="review-left-str">复习数量：</view>
							<picker range-key="name" @change="bindNumChange" :value="reviewNumIndex"
								:range="reviewNumList">
								<view class="reviewClass">
									{{reviewNumStr}}
								</view>
							</picker>
						</view>
						<view class="pop-promot-bottomView">
							<button class="bottom-leftbtn cancelButton" @click="hidePromptbox">取消</button>
							<button class="bottom-leftbtn defineButton" @click="ConfirmReviewGame">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import beePlanNewWordRule from '../../components/planBeeCom/beePlanNewWordRule.vue'
	import beePlanNewWordNumber from '../../components/planBeeCom/beePlanNewWordNumber.vue'
	export default {
		components: {
			beePlanNewWordRule,
			beePlanNewWordNumber
		},
		data() {
			return {
				formData: {
					master: '',
					thesaurusId: '',
					planId: '',
					word: ''
				},
				reviewProductName: '',
				reviewPlanName: '',
				reviewNumStr: '',
				showPromptbox: false,
				productNameShow: '',
				planNameShow: '',
				scroll_height: 0,
				wordNumberStr: '',
				allWordList: [],
				wordLibrary: [],
				staticWordLibrary: [],
				reviewBeeplanListIndex: 0,
				beeplanList: [],
				beeplanListIndex: 0,
				reviewNumIndex: 0,
				showReviewPop: false,
				reviewGroupsIndex: 0,
				WordGroupsIndex: 0,
				showbeePlanPromptbox: false,
				showReportPromptbox: false,
				errorWordSwitch: true, //true是关闭状态，false是开启状态。
				select: '0', //默认选中
				letter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				ReportPromptMsg: '',
				pageNum: 1,
				pageSize: 25,
				searchStr: "",
				isShowNodataview: false,
				reviewNumList: ['10', '20', '40', '60', '80', '100', '120', '140', '160', '180', '200']
			}
		},
		onLoad(options) {
			// var formData = {
			// 	"master": this.select,
			// 	"pageNum": 1,
			// 	"pageSize": this.pageSize,
			// }

			this.formData.master = this.select;
			this.getWordList();
			this.getIsOpenNewWord();
			this.getBeePlanList();
		},
		mounted() {
			this.$refs.paging.reload();
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			this.bottomHeight = this.$util.getBottomHeight() + 50;
			console.log('bottomHeight', this.bottomHeight);
			const that = this;
			query.select('.wordNumberClass').boundingClientRect(rect => {
				that.scroll_height = uni.getSystemInfoSync().windowHeight - rect.bottom - this.bottomHeight - 15;
			}).exec();
		},
		methods: {
			getQueryList(pageNo, pageSize) {
				this.formData.pageNum = pageNo;
				this.formData.pageSize = pageSize;
				this.$http.getErrorBeePlanWordList(this.formData).then(res => {
					if (res.code == 200) {
						this.$refs.paging.complete(res.data.list);
						this.wordNumberStr = this.select == '0' ? ('未掌握单词数:' + res.data.total) : (
							'已掌握单词数：' + res.data.total);
						this.$globalData.wordListJson = JSON.stringify(this.wordLibrary);
						this.staticWordLibrary = this.wordLibrary;
					} else {
						this.$refs.paging.complete(false);
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			getWordLibraryDesciption: function(formData) {
				console.log('formData', formData);
				this.$http.getErrorBeePlanWordList(formData).then(res => {
					if (res.code == 200) {
						if (res.data.length == 0 && formData.pageNum == 1) {
							this.wordLibrary = [];
						} else if ((res.data.list.length == 0 && formData.pageNum != 1) || (res.data.list
								.length < this.pageSize && formData.pageNum != 1)) {
							this.isShowNodataview = true;
							this.pageNum = formData.pageNum + 1;
							this.wordLibrary = this.wordLibrary.concat(res.data.list);
						} else if (formData.pageNum == 1) {
							this.wordLibrary = [];
							this.pageNum = formData.pageNum + 1;
							this.wordLibrary = this.wordLibrary.concat(res.data.list);
						} else {
							this.pageNum = formData.pageNum + 1;
							this.wordLibrary = this.wordLibrary.concat(res.data.list);
						}
						this.wordNumberStr = this.select == '0' ? ('未掌握单词数:' + res.data.total) : (
							'已掌握单词数：' + res.data.total);
						this.$globalData.wordListJson = JSON.stringify(this.wordLibrary);
						this.staticWordLibrary = this.wordLibrary;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 顶部未掌握、已掌握切换
			headMenuTap: function(e) {
				var formData = {};
				this.select = e.currentTarget.dataset.index;
				this.wordLibrary = [];
				this.pageNum = 1;
				this.isShowNodataview = false;
				if (this.WordGroupsIndex != 0) {
					this.formData.thesaurusId = this.allWordList[this.WordGroupsIndex].id;
				}
				if (this.beeplanListIndex != 0) {
					this.formData.planId = this.beeplanList[this.beeplanListIndex].id;
				}
				if (this.searchStr != "") {
					this.formData.word = this.searchStr;
				}
				this.formData.master = e.currentTarget.dataset.index;
				this.$refs.paging.reload(true);
			},
			//搜素内容监听
			getInputValue: function(e) {
				console.log('e', e);
				this.searchStr = e.detail.value;
			},
			// 已掌握单词搜索
			searchData: function() {
				this.pageNum = 1;
				this.searchWithWordAndGroup();
			},
			//词库搜索
			searchWithWordAndGroup: function() {
				this.formData.master = this.select;
				if (this.WordGroupsIndex != 0) {
					this.formData.thesaurusId = this.allWordList[this.WordGroupsIndex].id;
				}
				if (this.beeplanListIndex != 0) {
					this.formData.planId = this.beeplanList[this.beeplanListIndex].id;
				}
				if (this.searchStr != "") {
					this.formData.word = this.searchStr;
				}
				// formData.pageNum = this.pageNum;
				// formData.pageSize = this.pageSize;
				this.$refs.paging.reload(true);
			},
			//点击进入单词详情
			toWordDetail: function(e) {
				console.log('e', e);
				var wordIndex = e.currentTarget.dataset.wordindex;
				var wordData = this.wordLibrary[wordIndex];
				var transmitData = {
					wordData: JSON.stringify(wordData),
					title: '单词详情',
					type: 'normal',
				}
				uni.navigateTo({
					url: '/pages/planBee/wordClockDetailContentView?transmitData=' +
						encodeURIComponent(JSON.stringify(transmitData))
				})
			},
			//复习内容弹窗
			replaceWordsTap: function() {
				if (this.wordLibrary.length == 0) {
					this.showbeePlanPromptbox = true;
					this.message = '暂无生词内容';
				} else {
					this.showReviewPop = true;
					this.reviewProductName = this.allWordList[0].productName;
					this.reviewPlanName = this.beeplanList[0].name;
					this.reviewNumStr = this.reviewNumList[0];
				}
			},
			// 选择每日生词打卡数量
			radioChange: function(e) {
				console.log('ee', e)
			},
			// 确认开始复习
			ConfirmReviewGame: function(params) {
				this.hidePromptbox();
				var formData = {
					'thesaurusId': this.allWordList[this.reviewGroupsIndex].id,
					'num': this.reviewNumList[this.reviewNumIndex],
					'planId': this.beeplanList[this.reviewBeeplanListIndex].id,
				};
				this.$http.getReviewErrWord(formData).then(res => {
					if (res.code == 200) {
						this.$globalData.wordListJson = JSON.stringify(res.data)
						if (res.data.length !== 0) {
							var wordDetailData = res.data;
							var transmitData = {
								wordData: JSON.stringify(wordDetailData[0]),
								title: '生词复习',
								type: 'normal'
							}
							uni.navigateTo({
								url: '/pages/planBee/wordClockDetailContentView?transmitData=' +
									encodeURIComponent(JSON.stringify(transmitData))
							})
						} else {
							this.showbeePlanPromptbox = true;
							this.message = '该计划暂无需要复习的单词！'
						}
					} else if (res.code == 239) {
						this.showbeePlanPromptbox = true;
						this.message = res.msg;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//显示规则弹窗
			rulesWordsTap: function() {
				this.showPromptbox = true;
			},
			//隐藏弹窗
			hidePromptbox: function() {
				this.showReportPromptbox = false;
				this.showPromptbox = false;
				this.showbeePlanPromptbox = false;
				this.showReviewPop = false;
			},
			//开启每日生词打卡
			openNewWordClockInTap: function() {
				this.leftTitleStr = '确认开启';
				this.ReportPromptMsg = '开启后，每日会增加所选数量生词到每日打卡单词中（如不满所选数量会增加全部未掌握单词到每日打卡单词中）';
				this.showReportPromptbox = true;
			},
			//关闭每日生词打卡
			closeNewWordClockInTap: function() {
				this.leftTitleStr = '确认关闭';
				this.ReportPromptMsg = '关闭每日生词打卡功能后，您在每日打卡时不会增加未掌握单词到每日打卡单词中。请确认是否关闭？';
				this.showReportPromptbox = true;
			},
			//用户生词打卡状态
			openOrCloseTap: function(e) {
				console.log('e', e);
				this.hidePromptbox();
				var formData = {
					'errorWordSwitch': !this.errorWordSwitch,
					'errorWordNum': e.errorWordNum,
				};
				this.$http.openErrorSwitch(formData).then(res => {
					console.log('openErrorSwitch', res);
					if (res.code == 200) {
						this.errorWordSwitch = !this.errorWordSwitch;
						uni.showToast({
							title: this.errorWordSwitch ? '关闭成功' : '开启成功',
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//获取词库列表
			getWordList: function() {
				this.$http.findAllBeePlanWordList({}).then(res => {
					if (res.code == 200) {
						var cikuPlaceArray = [{
							'productName': '全部组别',
							'id': '-1'
						}];
						this.allWordList = [...cikuPlaceArray, ...res.data.spbcn, ...res.data
							.itso
						]; //cikuPlaceArray.concat(res.data.spbcn);
						// this.allWordList = cikuArray.concat(res.data.itso);
						console.log('this.allWordList', this.allWordList);
						this.productNameShow = this.allWordList[0].productName;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 获取是否开启生词打卡
			getIsOpenNewWord: function() {
				this.$http.checkExpire({}).then(res => {
					if (res.code == 200) {
						this.errorWordSwitch = res.data.errorWordSwitch;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 获取创建的蜂计划列表
			getBeePlanList: function() {
				this.$http.beePlanList({}).then(res => {
					if (res.code == 200) {
						if (res.data) {
							var beeplanList = [{
								'name': '全部计划',
								'id': '-1'
							}];
							for (let index = 0; index < res.data.length; index++) {
								for (let childIndex = 0; childIndex < res.data[index].mouthList
									.length; childIndex++) {
									for (let childItemIndex = 0; childItemIndex < res.data[index].mouthList[
											childIndex].list.length; childItemIndex++) {
										const element = res.data[index].mouthList[childIndex].list[
											childItemIndex];
										beeplanList = beeplanList.concat(element)
									}
								}
							}
							this.beeplanList = beeplanList;
							this.planNameShow = beeplanList[0].name;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//词库列表点击事件
			bindWirdChange: function(e) {
				var selectIndex = Number(e.detail.value);
				this.productNameShow = this.allWordList[selectIndex].productName;
				this.WordGroupsIndex = selectIndex;
				this.pageNum = 1;
				this.searchWithWordAndGroup();
			},
			// 蜂计划列表点击事件
			bindPlanChange: function(e) {
				var selectIndex = Number(e.detail.value);
				this.planNameShow = this.beeplanList[selectIndex].name;
				this.beeplanListIndex = selectIndex;
				this.pageNum = 1;
				this.searchWithWordAndGroup();
			},
			// 复习词库选择
			bindreviewChange: function(e) {
				var selectIndex = Number(e.detail.value);
				this.reviewGroupsIndex = selectIndex;
				this.reviewBeeplanListIndex = 0;
				this.reviewProductName = this.allWordList[selectIndex].productName
			},
			// 复习计划选择
			reviewBeeplanChange: function(e) {
				var selectIndex = Number(e.detail.value);
				this.reviewBeeplanListIndex = selectIndex;
				this.reviewPlanName = this.beeplanList[selectIndex].name
			},
			// 复习数量选择
			bindNumChange: function(e) {
				var selectIndex = Number(e.detail.value);
				this.reviewNumIndex = selectIndex;
				this.reviewNumStr = this.reviewNumList[selectIndex];
			},
		}
	}
</script>

<style lang="less">
	.content-backview {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 5px;
	}

	.word-container {
		display: block;
		min-height: 100%;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: #eceeef;
	}

	.bee-gameType-content-back {
		width: 90%;
		display: flex;
		position: relative;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border-radius: 20px;
		background: linear-gradient(to bottom, #000000, #efc44d);
		padding: 15px 0rpx;
		margin-top: 20px;
		box-shadow: 3px 3px 10px 3px rgb(160, 160, 160);
	}

	.word-container-banner {
		width: 100%;
		height: 75px;
	}

	.topmenu-backview {
		width: 100%;
		background: black;
		padding: 10px 0rpx;
		box-shadow: 5rpx 0rpx 10rpx 5rpx rgb(0, 0, 0);
	}

	.head-selet-menuView {
		width: 100%;
		height: 40px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		background-color: black;
	}

	.head-select-button {
		width: 110px;
		height: 30px;
		border-radius: 15px;
		color: white;
		font-size: 14px;
		line-height: 30px;
		font-weight: 600;
		background-color: black;
	}

	.search-view {
		width: 100%;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.wordGroupClass {
		width: 90px;
		height: 35px;
		box-sizing: border-box;
		padding: 0px 5px;
		line-height: 35px;
		text-align: center;
		background: var(--scheduleBackColor);
		font-size: 12px;
		border-radius: 17.5px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.wordNumberClass {
		width: 100%;
		height: 35px;
		line-height: 35px;
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		color: var(--themThesaurusBackColor);
	}

	.review-select-back {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
	}

	.review-left-str {
		font-size: 13px;
		font-family: 'hzgb';
		width: 70px;
	}

	.reviewClass {
		width: 150px;
		height: 30px;
		border-radius: 5px;
		line-height: 30px;
		padding: 0px 10px;
		text-align: left;
		font-family: 'hzgb';
		font-size: 13px;
		background-color: rgb(249, 249, 249);
		border: 1px solid;
		color: black;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.searchBackView {
		width: 150px;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.regist-team-input {
		width: 120px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		background-color: white;
		font-size: 14px;
		border-radius: 17.5px;
	}

	.bottom-nodataview {
		width: 100%;
		height: 10px;
		font-size: 13px;
		color: gray;
		text-align: center;
	}

	.regist-team-img {
		width: 26px;
		height: 26px;
		margin-left: 5px;
	}

	.ruleView {
		height: 30px;
		margin-right: 20rpx;
		line-height: 30px;
		border-radius: 15px;
		background: var(--individualBackColor);
		color: black;
		font-size: 14px;
		width: 75px;
		text-align: center;
	}

	.selectColo {
		background-color: var(--themeColor);
		color: black;
	}

	.group-name {
		padding: 5px 15px;
		height: 25px;
		line-height: 25px;
		background: #eeeeee;
		font-size: 20px;
	}

	.zimu-back {
		width: 92%;
		// box-sizing: border-box;
		padding: 0px 15px;
		margin: 15px 4%;
		height: 40px;
		border-radius: 20px;
		background: #ede6cd;
	}

	/* 字母属性 */
	.zimu {
		height: 40px;
		box-sizing: border-box;
		font-size: 14px;
		color: #000000;
	}

	/* 字母位置 */
	.weizhi {
		height: 40px;
		line-height: 40px;
		margin: 0px 15px;
	}

	/* 菜单位置 */
	#cdwz {
		width: 25px;
		font-family: Arial, Helvetica, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: black;
	}

	/* 字母菜单样式 */
	.caidan {
		font-size: 12px;
		margin-top: 5px;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 16px;
		height: 16px;
		text-align: center;
		line-height: 16px;
		border-radius: 8px;
	}

	.index_select {
		background: #fed444;
	}

	.bottom-content-backView {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.row {
		flex-direction: row;
	}

	.column {
		flex-direction: column;
	}

	.words-scroll {
		width: 100%;
	}

	.bottom_clear_view {
		width: 100%;
		background-color: black;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
	}

	.bottom-clear-button {
		width: 225px;
		height: 40px;
		border-radius: 20px;
		font-size: 14px;
		color: white;
		line-height: 40px;
		background: linear-gradient(#fc823d, #fa3748);
	}

	.bottom-replace-button {
		width: 150px;
		height: 40px;
		border-radius: 20px;
		font-family: 'hzgb';
		font-size: 14px;
		color: black;
		line-height: 40px;
		background-color: var(--themeColor);
		margin-top: 5px;
		/* margin-top: 20rpx; */
		/* background: linear-gradient(#fc823d, #fa3748); */
	}

	.i-progress-bg {
		background-color: orange;
	}

	.create-plan-placeImage {
		width: 200px;
		height: 200px;
		margin-top: 50px;
		margin-left: 87.5px;
	}

	.bottom-rule-button {
		color: #fa3748;
		width: 75px;
		height: 40px;
		/* border-radius: 40rpx; */
		font-size: 14px;
		/* border: 2rpx solid #fa3748; */
		line-height: 40px;
	}



	.pop-promot-box {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 10000;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pop-promot-back {
		padding: 15px;
		width: 90%;
		margin: 0 5%;
		border-radius: 10px;
		background-image: url(../../static/image/fjh/pop-content-back.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-color: var(--themeColor);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.pop-promot-title {
		font-size: 23px;
		color: white;
		margin: 15px;
		text-align: center;
		margin-bottom: 17.5px;
		font-family: 'hzgb';
		text-shadow: -1px 1px 0 #992722, 1px 1px 0 #992722, 1px -1px 0 #992722, -1px -1px 0 #992722;
		-webkit-text-stroke: 1px #992722;
	}

	.review-content-backview {
		width: 100%;
		display: flex;
		padding: 20px 0rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: white;
		border-radius: 10px;
	}

	.pop-promot-bottomView {
		width: 100%;
		height: 30px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 15px;
	}

	.bottom-leftbtn {
		width: 100px;
		height: 30px;
		line-height: 30px;
		border-radius: 15px;
		font-size: 13px;
		text-align: center;
		// font-weight: 800;
	}

	.defineButton {
		color: white;
		background: linear-gradient(#fc823d, #fa3748);
	}

	.cancelButton {
		color: black;
		background-color: gray;
	}
</style>